<template>
  <div class="login-box" id="app">
    <el-card>
      <div class="title">
        <h3>管理登录</h3>
      </div>
      <el-form>
        <el-input id="name" v-model="email" placeholder="请输入帐号">
          <template slot="prepend">帐号</template>
        </el-input>
        <el-input id="password" v-model="password" type="password" placeholder="请输入密码">
          <template slot="prepend">密码</template>
        </el-input>
        <el-button id="login" @click="check" style="width:100%" type="primary">登录</el-button>
      </el-form>
    </el-card>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      email: "",
      password: "",
      url: {
        login: "/login",
        homePage: "/admin"
      }
    };
  },
  methods: {
    check: function(event) {
      var _this = this;
      //获取值
      //debugger
      var email = this.email;
      var password = this.password;
      if (email == "" || password == "") {
        this.$notify.error("必填项不能留空");
        return;
      }

      _this
        .$post(this.url.login, { count: email, password: password })
        .then(res => {
          if (res.code == 0) {
            this.$notify.success("登录成功");
            window.localStorage.setItem("relay.token", res.data.token);
            window.localStorage.setItem("relay.role", res.data.role);
            window.localStorage.setItem("loginUser", res.data.name);
            console.log(_this.url.homePage)
            _this.$router.push({
              path: _this.url.homePage
            });
          }
        });
    }
  }
};
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-input {
  margin: 20px 0;
}
.login-box {
  padding: 20px;
}
.title h3 {
  padding: 0;
  margin: 0;
}
#login {
  margin-top: 20px;
}
.login-box {
  width: 500px !important;
  height: 300px;
  margin: 0 auto;
  margin-top: 12%;
  text-align: center;
}
</style>
